<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">设备管理</el-breadcrumb-item>
                <el-breadcrumb-item>价格类目</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 会员列表 -->
            <div class="userlist">
              <div class="status_box">
                <div class="search"><el-button @click="dialogVisible = true">新增价格方案</el-button></div>
              </div>
              <div class="table">
                <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" fixed="left" width="50"></el-table-column>
                  <el-table-column prop="id" label="ID" width="100"></el-table-column>
                  <el-table-column prop="timePrice" label="设备使用费">
                    <template slot-scope="scope">
                      <span>{{scope.row.timePrice}}元/分钟</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="waterPrice" label="清水">
                    <template slot-scope="scope">
                      <span>{{scope.row.waterPrice}}元/分钟</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="foamPrice" label="泡沫">
                    <template slot-scope="scope">
                      <span>{{scope.row.foamPrice}}元/分钟</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="vacuumPrice" label="吸尘">
                    <template slot-scope="scope">
                      <span>{{scope.row.vacuumPrice}}元/分钟</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="washPrice" label="洗手">
                    <template slot-scope="scope">
                      <span>{{scope.row.washPrice}}元/分钟</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.status== 2" class="userStatus2">停用中</span>
                      <span v-if="scope.row.status== 1" class="userStatus1">使用中</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                      <el-button @click="update(scope.row)" type="text" size="small">编辑</el-button>
                      <el-button v-if="scope.row.status==2" @click="dialogVisible1 = true,start(scope.row)" type="text" size="small"  class="userStatus1">启用</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="tips">
                  <p>1.不可随意修改套餐内容</p>
                  <p>2.分佣比例由数据库配置，前端不设置</p>
                </div>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[50,100,150,200,250]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </el-scrollbar>
          <el-dialog title="新增" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <el-form :model="priceForm" ref="priceForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="设备使用费：" prop="timePrice">
                <el-input v-model="priceForm.timePrice" class="priceInput" placeholder="保留至分"></el-input>
                <span>元/分钟</span>
              </el-form-item>
              <el-form-item label="清水：" prop="waterPrice">
                <el-input v-model="priceForm.waterPrice" class="priceInput" placeholder="保留至分"></el-input>
                <span>元/分钟</span>
              </el-form-item>
              <el-form-item label="泡沫：" prop="foamPrice">
                <el-input v-model="priceForm.foamPrice" class="priceInput" placeholder="保留至分"></el-input>
                <span>元/分钟</span>
              </el-form-item>
              <el-form-item label="吸尘：" prop="vacuumPrice">
                <el-input v-model="priceForm.vacuumPrice" class="priceInput" placeholder="保留至分"></el-input>
                <span>元/分钟</span>
              </el-form-item>
              <el-form-item label="洗手：" prop="washPrice">
                <el-input v-model="priceForm.washPrice" class="priceInput" placeholder="保留至分"></el-input>
                <span>元/分钟</span>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false,submitpriceForm('priceForm')">确 定</el-button>
              <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
          </el-dialog>
          <el-dialog title="变更价格方案" :visible.sync="dialogVisible1" width="40%" :before-close="handleClose1">
            <span style="font-weight: bold;text-align: center;">是否使用新价格方案？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible1 = false,submitpriceForm1('priceForm1')">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog title="编辑" :visible.sync="dialogVisible2" width="40%" :before-close="handleClose2">
            <el-form :model="priceForm2" ref="priceForm2" label-width="100px" class="demo-ruleForm">
              <el-form-item label="设备使用费：" prop="timePrice">
                <el-input v-model="priceForm2.timePrice" class="priceInput" placeholder="保留至分"></el-input>
                <span>元/分钟</span>
              </el-form-item>
              <el-form-item label="清水：" prop="waterPrice">
                <el-input v-model="priceForm2.waterPrice" class="priceInput" placeholder="保留至分"></el-input>
                <span>元/分钟</span>
              </el-form-item>
              <el-form-item label="泡沫：" prop="foamPrice">
                <el-input v-model="priceForm2.foamPrice" class="priceInput" placeholder="保留至分"></el-input>
                <span>元/分钟</span>
              </el-form-item>
              <el-form-item label="吸尘：" prop="vacuumPrice">
                <el-input v-model="priceForm2.vacuumPrice" class="priceInput" placeholder="保留至分"></el-input>
                <span>元/分钟</span>
              </el-form-item>
              <el-form-item label="洗手：" prop="washPrice">
                <el-input v-model="priceForm2.washPrice" class="priceInput" placeholder="保留至分"></el-input>
                <span>元/分钟</span>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible2 = false,submitpriceForm2('priceForm2')">确 定</el-button>
              <el-button @click="dialogVisible2 = false">取 消</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'

  export default {
    name: 'PriceList',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        page: 1,//页码
        pageSize: 10,//每页条数
        total: 0,/* 总的条数 */
        currentPage: 0,/* 前往第几页 */
        // 会员表格
        tableData: [],
        multipleSelection: [], // 选择后的列表
        dialogVisible: false,//新增弹窗
        dialogVisible1: false,//变更价格方案弹窗
        dialogVisible2: false,//变更价格方案弹窗
        priceForm:{},//新增价格弹窗表单
        priceRules:{//新增价格弹窗表单规则
          priceId:[
            { required: true, message: '不能为空', trigger: 'blur' },
          ]
        },
        priceForm1:{},//启用价格弹窗表单
        priceForm2:{},//编辑价格弹窗表单
      }
    },
    mounted() {
      this.getAllUser();
    },
    methods: {
      // 时间格式过滤
      dateForma(row,column){
        var date = row[column.property];
        if(date == undefined){
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      // 获取所有价格列表
      getAllUser(){
        this.$axios.post(this.baseURL+'price',{
          "page": this.page,
          "pageSize":this.pageSize,
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"价格列表资源");
          if(res.data.code==1){
            this.tableData = res.data.data;
            this.total = res.data.data.length;
            // this.pageSize = res.data.data.size;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //关闭新增弹窗
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //关闭变更价格方案弹窗
      handleClose1(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //关闭编辑弹窗
      handleClose2(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      // 表格的全选
      handleSelectionChange(val) {
        console.log(val);
        this.multipleSelection = val;
      },
      // 选择的每页条数
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.findUser();// 获取产品列表
      },
      // 当前页面
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val;
        this.findUser();
      },
      //提交新增价格方案
      submitpriceForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log('submit!');
            this.dialogVisible = false;//关闭弹窗
            console.log(this.priceForm);
            this.$axios.post(this.baseURL+'price/add',{
              "timePrice":this.priceForm.timePrice,//设备使用费
              "waterPrice":this.priceForm.waterPrice,//清水费
              "foamPrice":this.priceForm.foamPrice,//泡沫费
              "vacuumPrice":this.priceForm.vacuumPrice,//吸尘费
              "washPrice":this.priceForm.washPrice,//洗手费
              "status":2,//状态  默认停用状态
              "requestSource":"PC"
            }).then((res)=>{
              console.log(res,"新增设备");
              if(res.data.code==1){
                this.$message({
                  type: 'success',
                  message: '新增价格方案成功'
                });
                setTimeout(()=>{
                  this.getAllUser();
                },1000)
              }else{
                this.$message({
                  type: 'error',
                  message: res.data.msg
                });
              }
            }).catch((err)=>{
              console.log('request fail', err);
            })
          }else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //编辑价格方案
      update(row) {
        console.log(row)
        this.dialogVisible2 = true;
        this.priceForm2=row;
      },
      submitpriceForm2(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.dialogVisible2 = false;//关闭弹窗
            console.log(this.priceForm2);
            this.$axios.post(this.baseURL+'price/update',{
              "id":this.priceForm2.id,//设备id
              "timePrice":this.priceForm2.timePrice,//设备使用费
              "waterPrice":this.priceForm2.waterPrice,//清水费
              "foamPrice":this.priceForm2.foamPrice,//泡沫费
              "vacuumPrice":this.priceForm2.vacuumPrice,//吸尘费
              "washPrice":this.priceForm2.washPrice,//洗手费
              "requestSource":"PC"
            }).then((res)=>{
              console.log(res,"新增设备");
              if(res.data.code==1){
                this.$message({
                  type: 'success',
                  message: '新增价格方案成功'
                });
                setTimeout(()=>{
                  this.getAllUser();
                },1000)
              }else{
                this.$message({
                  type: 'error',
                  message: res.data.msg
                });
              }
            }).catch((err)=>{
              console.log('request fail', err);
            })
          }else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //变更价格方案
      start(row){
        this.dialogVisible1 = true;
        this.priceForm1=row;
        console.log(row.id)
        /* this.$axios.post(this.baseURL+'price/update',{
          "id":row.id,//id
          "status":1,//状态  默认停用状态
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
            this.$message({
              type: 'success',
              message: '修改价格方案成功'
            });
            setTimeout(()=>{
              this.getAllUser();
            },1000)
          }else{
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }
        }).catch((err)=>{
          console.log('request fail', err);
        }) */
      },
      submitpriceForm1(formName){
        this.dialogVisible1 = false;//关闭弹窗
        console.log(this.priceForm1);
        this.$axios.post(this.baseURL+'price/update',{
          "id":this.priceForm1.id,//设备id
          "status":1,//状态  默认停用状态
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
            this.$message({
              type: 'success',
              message: '修改价格方案成功'
            });
            setTimeout(()=>{
              this.getAllUser();
            },1000)
          }else{
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .userStatus1 {
    color: #19be6b;
  }
  .userStatus2 {
    color: #eb194d;
  }
  .userStatus3 {
    color: red;
  }
  .tips{
    margin: 20px;
  }
  >>> .el-form-item{
    margin-bottom: 8px;
  }
  >>> .el-form-item__label{
    color: #333333;
    line-height: 35px;
  }
  >>> .el-form-item__content{
    line-height: 35px;
  }
  .priceInput{
    width: 300px;
    >>> .el-input__inner{
      height: 35px;
      line-height: 35px;
    }
  }
  >>> .el-dialog__body{
    text-align: center;
  }
</style>
